<template>
  <div class="recommend" style="margin-top:50px;margin-bottom: 50px;">
    <alert v-if="message" v-text="message"></alert>
    <article>

      <md-tabs md-centered class="md-transparent" >
        <md-tab md-icon="ondemand_video" class="switch">
          <span class="rec-span">推荐歌单</span>
          <md-card  v-for="(item,index) in recList" :key="index" md-with-hover style="width:calc(50% - 15px);display: inline-block;margin-right: 15px;margin-top: 10px;">
            <md-card-media >
              <img :src="item.img" alt="People" @click="doSwitch(item.id)" >
            </md-card-media>
            <md-card-actions>
              <i  class="demo-icon icon-eye"></i>
              <i class="demo-icon icon-bookmark"></i>
              <i class="demo-icon icon-share"></i>
            </md-card-actions>
          </md-card>
        </md-tab>
        <md-tab md-icon="music_note" ref="switch">
          <span class="rec-span">{{currentList.name}}</span>
          <section class="fav-list" v-for="(item,index) in currentList.songs">
               <span class="left">
                 <img :src="item.img" alt="header" />
               </span>
            <span class="right">
                  {{item.sname}}/{{item.singer}}
               </span>
            <span style="float: right;display:inline-block;padding-top: 15px;">
                  <i :data-id="currentList.id" :data-sid="item.sid" :id="item.sid" @click="like($event)" :class="item.flag==true?'like':''" class="demo-icon icon-heart"  :data-index="index"></i>
               </span>
          </section>
        </md-tab>
        <md-tab md-icon="favorite">
          <span class="rec-span">收藏歌单</span>
          <section class="fav-list" v-for="item in likeList">

               <span class="left">
                 <img :src="item.img" alt="header" />
               </span>
            <span class="right">
                  {{item.name}} / {{item.singer}}
               </span>
            <span style="float: right;display:inline-block;padding-top: 15px;">
              <i  class="demo-icon icon-bug" @click="deleteLike(item.id)"></i>
            </span>
          </section>
        </md-tab>
      </md-tabs>

    </article>
  </div>
</template>
<script>
  import Alert from '../alert/alert.vue'
  export default {
    name:'recommend',
    data(){
      return{
        recList:{},
        currentId:0,
        currentClass:"",
        message:"",
        currentList:{},
        likeList:{},
        hiddenId:1,
        index:-1,
        postId:0,
        updataItem:[]
      }
    },
    methods:{
      like(ev) {
        const arrayList = this.currentList.songs;    //当前歌曲列表
        const selected = arrayList[ev.target.getAttribute("data-index")];       //选中的歌曲信息
        if(selected.flag==true){
          this.message = "歌曲已经在播放队列！";
          setInterval(()=>{
            this.message = ""
          },3000)
        }
        else {
          let that = this;
          //修改原来的flag属性
          const id = ev.target.getAttribute("data-id");
          const  sid = ev.target.getAttribute("data-sid");

          this.$http.get("http://localhost:3000/recommend/"+id)
            .then((response)=>{
              const result = response.body.songs;
              const recmmond = response.body;
              const rid = recmmond.id;
              const rname = recmmond.name;
              const img = recmmond.img;
              const type = recmmond.type;
              const songs = that.updataItem;

              result.forEach(function (item) {
                if(item.sid == sid){
                  that.updataItem = {
                    sid:item.sid,
                    sname:item.sname,
                    singer:item.singer,
                    img:item.img,
                    flag:true
                  };
                  let updateRec = {
                    id:rid,
                    name:rname,
                    img:img,
                    type:type,
                    songs:that.updataItem
                  };

                  that.$http.put("http://localhost:3000/recommend/"+id,updateRec)
                    .then((response)=>{
                      console.log("success!");
                    })
                }
              });
            })


          /* //添加到喜欢的列表
            let likeItem = {
              id:selected.sid,
              name:selected.sname,
              singer:selected.singer,
              img:selected.img,
              flag:true
            };
            this.$http.post("http://localhost:3000/like",likeItem)
              .then((response)=>{
                 this.message = "添加成功!";
                 this.fetchLikeList();               //刷新收藏列表
                 this.fetchCurrentList();            //刷新歌曲列表
                 setInterval(()=>{
                   this.message = ""
                 },3000)
              })*/
        }
      },
      doSwitch(id){
        var btn = this.$refs.switch.parentTabs.$el.children[0].children[0].children[0].children[1];
        btn.click();
        this.hiddenId = id;
        this.$http.get("http://localhost:3000/recommend/"+id)
          .then((response)=>{
            this.currentList = response.body;
          })
      },
      /*获取喜欢的列表数据*/
      fetchLikeList(){
        this.$http.get("http://localhost:3000/like")
          .then((response)=>{
            this.likeList = response.body;
          })
      },
      /*获取歌曲列表数据*/
      fetchCurrentList(){
        this.$http.get("http://localhost:3000/recommend/"+this.hiddenId)
          .then((response)=>{
            this.currentList = response.body;
          });
      },
      deleteLike(id){
        this.$http.delete("http://localhost:3000/like/"+id)
          .then((response)=>{
            this.fetchLikeList();
          })
      }
    },
    created(){
      this.$http.get("http://localhost:3000/recommend")
        .then((response)=>{
          this.recList = response.body;
        });
      this.fetchLikeList();
      this.fetchCurrentList();
    },
    components:{
      Alert
    }
  }
</script>
<style>
  .like{
    color: #D43C33;
  }
  .rec-span{
    border-left:2px solid #D43C33;
    display:block;
    padding-left: 10px;
  }
  .left>img{
    width:52px;
    min-width: 52px;
    height: 52px;
    border-radius: 50%;
  }
  .right{
    font-size: 16px;
    padding-left: 15px;
  }
  .fav-list{
    margin-top: 15px;
    margin-bottom: 15px;
  }
</style>
